<!--
 * @Author: your name
 * @Date: 2021-08-30 14:44:24
 * @LastEditTime: 2021-09-01 15:24:09
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \bigdate\src\components\dropdown\index.vue
-->
<template>
    <Dropdown>
        <span>
            <slot></slot>
        </span>
        <template #overlay>
            <Menu>
                <template v-for="(item, index) in listDatas" :key="index">
                    <MenuItem>
                        <div class="menu_item" @click="handleClick(item)">
                            <svg-icon
                                :icon-class="item.icon"
                               
                                size="1.2"
                            ></svg-icon>
                            <span>{{ key(item.title) }}</span>
                        </div>
                    </MenuItem>
                </template>
            </Menu>
        </template>
    </Dropdown>
</template>

<script lang="ts">
import { Dropdown, Menu, Popconfirm } from 'ant-design-vue'
import i18n from '../../setting/locales/setlocales'
import { defineComponent } from 'vue'

const { t } = i18n.global
const props = {
    listDatas: {
        type: Array,
    },
}
export default defineComponent({
    name: 'ADropdowns',
    components: {
        Dropdown,
        Menu,
        MenuItem: Menu.Item,
        Popconfirm,
    },
    props,
    setup(_, { emit }) {
        const handleClick = (e) => {
            emit('click', e)
        }
        const key = (value) => t(value)
        return {
            handleClick,
            key,
        }
    },
})
</script>

<style lang="less" scoped>
.menu_item {
  display: flex;
  align-items: center;
  width: 100%;
  & > span {
    margin-left: 10px;
    font-size: 13px;
  }
}
</style>
